import React, { useState } from "react";
import {
  Box,
  Input,
  InputLeftAddon,
  InputGroup,
  FormControl,
  FormHelperText,
  Stack,
  Button,
  Checkbox,
  Flex,
  Text,
} from "@chakra-ui/react";
import { FaUserAlt, FaLock } from "react-icons/fa";
import { AiFillWarning } from "react-icons/ai";
import axios from 'axios';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Footer from "./Footer";

export default function SignUp () {
  const [loginLoading, setLoginLoading] = useState(false)
  const formik = useFormik({
    initialValues: { email: '', password: '' },
    validationSchema: Yup.object({
      email: Yup.string().email('请输入正确邮箱').required('请输入邮箱'),
      password: Yup.string().required('请输入密码')
    }),
    onSubmit: async values => {
      setLoginLoading(true)
      await axios.post('https://conduit.productionready.io/api/users/login', {
        user: {
          email: values.email,
          password: values.password
        }
      })
      setLoginLoading(false)
    }
  })
  return (
    <form>
      <InputGroup>
        <InputLeftAddon
          px="10px"
          borderRight="none"
          h="50px"
          children={<FaUserAlt color={"#969696"} />}
          bgColor="hsla(0,0%,71%,.1)"
          borderBottomLeftRadius="0px"
        />
        <Input
          h="50px"
          pl="0"
          py="4px"
          position="relative"
          borderLeft="none"
          placeholder="邮箱"
          bgColor="hsla(0,0%,71%,.1)"
          borderBottomRightRadius="0px"
          _focus={{ boxShadow: "none" }}
          {...formik.getFieldProps('email')}
        />
        <FormControl
          display={formik.touched.email && formik.errors.email ? 'block' : 'none'}
          borderColor="tomato"
          w="280px"
          textAlign="center"
          borderRadius="4px"
          border="1px solid #c8c8c8"
          py="3px"
          px="10px"
          position="absolute"
          left="315px"
          top="5px"
          bgColor="#fff"
        >
          <Box
            position="absolute"
            borderTop="1px solid #c8c8c8"
            borderLeft="1px solid #c8c8c8"
            bgColor="#fff"
            w="10px"
            h="10px"
            transform="rotate(-45deg)"
            top="12px"
            left="-6px"
          ></Box>
          <Stack direction="horizontal" align="center">
            <AiFillWarning color={"#ea6f5a"} fontSize="26px" />
            <FormHelperText
              w="100%"
              mt="0px"
              color="#333"
              fontSize="14px"
              py="5px"
            >
              {formik.errors.email ? formik.errors.email : ''}
            </FormHelperText>
          </Stack>
        </FormControl>
      </InputGroup>
      <InputGroup>
        <InputLeftAddon
          borderRadius="0px"
          px="10px"
          borderRight="none"
          h="50px"
          children={<FaLock color={"#969696"} />}
          bgColor="hsla(0,0%,71%,.1)"
        />
        <Input
          h="50px"
          pl="0"
          py="4px"
          borderRadius="0px"
          position="relative"
          borderLeft="none"
          _focus={{ boxShadow: "none" }}
          placeholder="密码"
          bgColor="hsla(0,0%,71%,.1)"
          autoComplete="off"
          type="password"
          {...formik.getFieldProps('password')}
        />
        <FormControl
          display={formik.touched.password && formik.errors.password ? 'block' : 'none'}
          borderColor="tomato"
          w="280px"
          textAlign="center"
          borderRadius="4px"
          border="1px solid #c8c8c8"
          py="3px"
          px="10px"
          position="absolute"
          left="315px"
          top="5px"
          bgColor="#fff"
        >
          <Box
            position="absolute"
            borderTop="1px solid #c8c8c8"
            borderLeft="1px solid #c8c8c8"
            bgColor="#fff"
            w="10px"
            h="10px"
            transform="rotate(-45deg)"
            top="12px"
            left="-6px"
          ></Box>
          <Stack direction="horizontal" align="center">
            <AiFillWarning color={"#ea6f5a"} fontSize="26px" />
            <FormHelperText
              w="100%"
              mt="0px"
              color="#333"
              fontSize="14px"
              py="5px"
            >
              {formik.errors.password ? formik.errors.password : ''}
            </FormHelperText>
          </Stack>
        </FormControl>
      </InputGroup>
      <Flex justify="space-between" align="center">
        <Checkbox
          _focus={{ boxShadow: "none" }}
          my="15px"
          fontSize="15px"
          color="#969696"
        >
          记住我
        </Checkbox>
        <Text
          fontSize="14px"
          color="#999"
          cursor="pointer"
        >
          登录遇到问题?
        </Text>
      </Flex>
      <Button
        mt="20px"
        w="100%"
        px="9px"
        py="18px"
        border="none"
        borderRadius="25px"
        color="#fff"
        bgColor="#3194d0"
        outline="none"
        _focus={{ boxShadow: "none" }}
        _active={{ bgColor: "#187cb7" }}
        onClick={formik.handleSubmit}
        disabled={loginLoading}
      >
        {loginLoading ? '登录中' : '登录'}
      </Button>
      <Footer login={true} />
    </form>
  );
}